// 函数组件
const App = () => {
  // React.useState 实现状态的定义，解构获取两个参数，第一个是状态名，第二个是更新状态的方法
  const [prog, setProg] = React.useState([]);
  const [filterProg, setFilterProg] = React.useState([]);

  // 实现数据只更新一次(第二个参数传递空数组实现)，类似类组件中的componentDidMount方法
  React.useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon")
      .then(res => res.json())
      .then(json => {
        json.results.map((result, index) => {
          result.id = index + 1;
        });
        setProg(json.results);
        setFilterProg(json.results);
      });
  }, []);

  const onChangeHandler = event => {
    const t = prog.filter((value) => {
      return value.name.includes(event.target.value);
    });
    if(t && t.length > 0) {
      setFilterProg(t)
    } else {
      setFilterProg([{
        url: '#',
        id: 0,
        name: 'unkonwn'
      }])
    }
  };

  return (
    <div className="root">
      <h1>React Demo - Pokemon List</h1>
      <Input onChangeHandler={ onChangeHandler } />
      <Lists filterList={ filterProg } />
    </div>
  )
}

// 类组件
// class App extends React.Component { 
//   constructor() {
//     super();
//     this.state = {
//       prog: [],
//       filterProg: [],
//       tag: 'react demo tag',
//       searching: ''
//     };
//   }

//   componentDidMount() {
//     fetch("https://pokeapi.co/api/v2/pokemon")
//       .then(res => res.json())
//       .then(json => {
//         json.results.map((result, index) => {
//           result.id = index + 1;
//         });
//         this.setState(
//           () => {
//             return { 
//               prog: json.results,
//               filterProg: json.results
//             }
//           },
//           () => {}
//         );
//       });
//   }

//   onChangeHandler = event => {
//     const t = this.state.prog.filter((value) => {
//       return value.name.includes(event.target.value);
//     });

//     this.setState(
//       {
//         filterProg: t 
//       }
//     )
//   }

//   render() {
//     return (
//       <div>
//         <h1>React Demo</h1>
//         <Input onChangeHandler={ this.onChangeHandler } />
//         <Lists filterList={ this.state.filterProg } />
//       </div>
//     );
//   }
// }